<template>
  <div class="user-head">
    <el-button type="primary" @click="addButton">新增</el-button>
    <el-form :inline="true" :model='searchData'>
      <el-form-item label="用户名">
        <el-input v-model="searchData.name" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchButton">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="user-data">
    <el-table :data="tableData">
      <el-table-column v-for="item in tableLabel" :key="item.prop" :prop="item.prop" :label="item.label"
        :width="item.width ? item.width : 150" >
        <template #default="{ row }">
          <span v-if="item.prop === 'sex'">
            {{ row[item.prop] == '0' ? '男' : ' 女' }}
          </span>
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>

      <el-table-column label="Operations" min-width="120">
        <template #=scoped>
          <el-button type="primary" size="small" @click="handleEdit(scoped.row)">
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(scoped.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="config.dialogVisible" :title="config.dialogTitle" width="500" :before-close="handleClose">
      <el-form ref="formRef" :model="formUser" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户名" prop="userid">
          <el-input  v-model="formUser.userid" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input  v-model="formUser.password" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input  v-model="formUser.name" />
        </el-form-item>
        <el-form-item label="日期" prop="brithday">
          <el-date-picker
              v-model="formUser.brithday"
              type="date"
              clearable
              value-format="YYYY-MM-DD"
            />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select
            v-model="formUser.sex"
            clearable
          >
            <el-option label="男" :value="0" />
            <el-option label="女" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="formUser.city" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="formUser.address" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="pagediv">
      <el-pagination class="page" layout="prev, pager, next" v-model:current-page="searchData.page"
        :page-size="searchData.size" @current-change="handleCurrentChange" :total="searchData.total" />
    </div>

  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, reactive } from 'vue'
const { proxy } = getCurrentInstance();
const config = reactive({
  dialogVisible: false,
  dialogTitle:'新增用户'
})
//新增对话框开关
const dialogVisible = ref(false);
//处理新增对话框关闭
const handleClose = ()=>{
  config.dialogVisible = false;
  formUser.value = {sex:0}
  formRef.value.resetFields();
}
const formRef = ref(null)
const formUser = ref({
  guid: '',
  name: '',
  userid: '',
  brithday: '',
  city: '',
  sex: 0,
  address: '',
  password: ''
})
const addButton = ()=>{
  config.dialogVisible = true
}
 
const onSubmit =async () =>{
  console.log(formUser.value);
  
  let res = await proxy.$api.saveUser(formUser.value)
  getUserData();
  handleClose();
  formUser = {};
  console.log(res);
  
  console.log(formUser);
  
}
const searchData = reactive({
  name: '',
  page: 1,
  size: 5,
  total: 0
})
const handleCurrentChange = (page) => {
  searchData.page = page;
  getUserData();

}
const handleDelete = async (val) => {
  let data = {
    ids: val.guid
  }
  await proxy.$api.deleteUser(data)
  getUserData()

}
const handleEdit = (val) => {
  formUser.value = { ...val };
  config.dialogVisible= true,
  config.dialogTitle='编辑用户'
}
const tableData = ref([])
const tableLabel = reactive([
    {
      prop: "userid",
      label: "用户名"
    },  
    {
      prop: "name",
      label: "姓名"
    },
    {
      prop: "sex",
      label: "性别"
    },
    {
      prop: "brithday",
      label: "日期"
    },
    {
      prop: "city",
      label: "城市"
    },
    
    {
      prop: "address",
      label: "地址",
      width: '300px'
    },
])
const searchButton = (() => {
  getUserData()
})
const getUserData = async () => {
  let res = await proxy.$api.getUserData(searchData)
  
  tableData.value = res.data.data
  searchData.total = res.data.total;
}
onMounted(() => {
  getUserData()
})
</script>
<style lang="less">
.user-head {
  display: flex;
  justify-content: space-between;
}

.user-data {
  .pagediv {
    display: flex;
    justify-content: center;
  }

  .page {}
}
</style>
